<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>作用域（scope)</title>
    <script src="../../js/angular/angular.min.js"></script>
    <script type="text/javascript" src="demo3.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="myController">
        <h1>Hello{{name}}</h1>
    </div>
</div>
</body>
</html>
<!--作用域（scope）①是构成AngularJS应用的核心基础，在整个框架中都被广泛使用，因此了解它如何工作是非常重要。
$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方
作用域是视图和控制器之间的胶水-->

<!--视图和$scope的世界
AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层

$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。
$scope对象在AngularJS中充当数据模型，但与传统的数据模型不一样，$scope并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水-->

<!--
 指令：将DOM元素增强为可复用的DOM组件的属性或元素。
 值绑定：模板语法{{ }}可以将表达式绑定到视图上。
 过滤器：可以在视图中使用的函数，用来进行格式化。
 表单控件：用来检验用户输入的控件。
-->



<!--
angular.module('myApp', [])
.run(function($rootScope) {
$rootScope.name = "World";
});
在视图中可以引用这个name属性并将它展示给用户：
<div ng-app="myApp">
    <h1>Hello {{ name }}</h1>
</div>
我们可以不将变量设置在$rootScope上，而是用控制器显式创建一个隔离的子$scope对象，
把它设置到这个子对象上。使用ng-controller指令可以将一个控制器对象附加到DOM元素上，
如下所示：
<div ng-app="myApp">
    <div ng-controller="MyController">
        <h1>Hello {{ name }}</h1>
    </div>
</div>
我们可以创建一个控制器来管理与其相关的变量，而不用将name变量直接放在$rootScope上：
angular.module("myApp", [])
.controller('MyController',
function($scope) {
$scope.name = "Ari";
});
ng-controller指令为这个DOM元素创建了一个新的$scope对象，并将它嵌套在$rootScope中。-->
